<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            width: 200px;
        }
    </style>
</head>
<body>
    
</body>
<script>
    // 扩展运算符 （spread） ...    => 展开数组或对象


    // 展开数组 => 得到逗号分隔的参数序列


    // 展开对象 => 得到逗号分隔的键值对序列
    // 用法:
    // 展开对象放到新对象中 

    // var obj = {a:1,b:2,c:3};
    // console.log(obj);
    // console.log(...obj);  // ...obj => a:1,b:2,c:3  // 报错 => 得到的键值对序列不能直接作为函数的参数


    // 应用
    // 1. 对象的浅拷贝 =>只拷贝一层,如果对象的键值是引用类型,还是引用同一片内存空间
    // var obj = {a:1,b:2,c:3,d:[1,2,3]};
    // var data = {
    //     ...obj,
    // }
    // console.log(data);
    // console.log(obj);

    // 2. 对象的合并
    var a = {a:1};
    var b = {b:2};
    var c = {c:3};

    var obj = {
        ...a,//a:1
        ...b,
        ...c,
        a:10,
    }
    console.log(obj);


</script>
</html>